<template>
	<view>
		<view class="container">
			<u-form ref="editFilm" labelWidth="80" :model="editForm" :rules="editRules">
				<u-form-item @click="pickerShow = true" required label="所属影视" prop="filmId" borderBottom>
					<u-input v-model="editForm.filmName" disabled disabledColor="#ffffff" placeholder="请选择影视分类"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="pickerShow" title="影视列表" ref="uPicker" :columns="filmList" keyName="name"
						@cancel="cancelHandler" @confirm="confirmHandler">
					</u-picker>
				</u-form-item>

				<u-form-item required label="资源标题" prop="title" borderBottom>
					<u-input v-model="editForm.title" placeholder="请输入影视名称" border="none"></u-input>
				</u-form-item>
				
				<u-form-item required label="第几集" prop="number" borderBottom>
					<u-input type="number" v-model="editForm.number" placeholder="请输入影视名称" border="none"></u-input>
				</u-form-item>

				<u-form-item required label="封面图" prop="thumbnail" borderBottom>

					<u-upload ref="uUpload" :uploadText="upImgText" :fileList="coverImgFiles" name="coverImgUpload"
						multiple :maxCount="1" :maxSize="2" :beforeRead="beforeRead" :afterRead="afterRead"
						@delete="deleteImg">
					</u-upload>

				</u-form-item>
				
				<u-form-item required label="资源视频" prop="image" borderBottom>
				
					<u-upload
						ref="videoUpload" 
						:uploadText="upVideoText"
						:fileList="videoList"
						:afterRead="videoAfterRead"
						@delete="videoDelete"
						name="video"
						:maxCount="1"
						accept="video"
					></u-upload>
				
				</u-form-item>

				<u-button class="btn" type="primary" :text="id ? '修改' : '添加'" @click="editFilmData"></u-button>
			</u-form>
		</view>

	</view>
</template>

<script>
	import http from "@/utils/http.js"
	import Config from "@/utils/config.js"
	import Constants from "@/utils/constants.js"
	export default {
		data() {
			return {
				//显示隐藏选择器
				pickerShow: false,
				//电影列表
				filmList: [],
				upImgText: '最大支持2MB',
				upVideoText: '最大支持20MB',
				//资源
				videoList:[],
				id: null,
				//表单数据对象
				editForm: {
					id: null,
					image: null,
					thumbnail: null,
					title: null,
					filmId: null,
					number: null
				},
				//表单校验对象
				editRules: {
					filmId: {
						type: 'number',
						required: true,
						message: '请选择所属影视',
						trigger: ['blur', 'change']
					},
					title: {
						type: 'string',
						required: true,
						message: '请填写资源标题',
						trigger: ['blur', 'change']
					},
					thumbnail: {
						type: 'string',
						required: true,
						message: '请上传封面图',
						trigger: ['blur', 'change']
					},
					image: {
						type: 'string',
						required: true,
						message: '请上传资源视频',
						trigger: ['blur', 'change']
					},
					number: {
						type: 'number',
						required: true,
						message: '请填写第几集',
						trigger: ['blur', 'change']
					}
				},
				//文件大小
				coverSize: 2097152,
				videoSize : 20971520,
				//上传封面图
				coverImgFiles: []
			}
		},
		onLoad(options) {
			if (options.resourceId) {
				uni.setNavigationBarTitle({
					title: '编辑资源'
				})
				this.id = options.resourceId
			}
			this.geetFilmList()

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.editFilm.setRules(this.editRules)
		},
		methods: {
			//获取电影
			geetFilmList() {
				var params = {
					url: `/film/filmShort/u/list`,
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							this.filmList = [res.data]
							if(this.id){
								this.getDetail()
							}
						}
					}
				};
				http.request(params);
			},
			//获取电影详情
			async getDetail() {
				var params = {
					url: `/movie/u/getDetail/${this.id}`,
					method: "GET",
					callBack: (res) => {
						if (res.code == 200) {
							this.editForm = res.data
							this.filmList[0].forEach(item => {
								if (item.id == this.editForm.filmId) {
									this.editForm.filmName = item.name
								}
							})
							this.coverImgFiles.push({
								url: this.editForm.thumbnail
							})
							this.videoList.push({
								url: this.editForm.image
							})
						}
					}
				};
				await http.request(params);
			},
			//上传图片前回调
			beforeRead(file) {
				//2097152   25224
				if (file.size > this.coverSize) {
					uni.showToast({
						title: '大小不得超过2MB',
						icon: 'error'
					})
				}
				this.uploadFileImg(file)

			},
			//上传图片后的回调
			afterRead(file) {
				this.coverImgFiles = []
				this.coverImgFiles.push({
					url: file
				})
				this.editForm.thumbnail = file
			},
			
			//上传图片
			uploadFileImg(file) {
				let fileInfo = file[0];
				uni.showLoading({
					title:'上传中'
				})
				uni.uploadFile({
					url: Config.domain + '/u/my/uploadFile',
					filePath: fileInfo.url,
					name: "file",
					header: {
						Authorization: uni.getStorageSync(Constants.USER_TOKEN_KEY)
					},
					success: (res) => {
						uni.hideLoading()
						let rData = JSON.parse(res.data);
						if (rData.code === 200) {
							this.$refs.uUpload.afterRead(rData.data)
						}else{
							uni.$u.toast("上传出错")
						}
					},
					fail: () => {
						uni.hideLoading()
						uni.$u.toast("上传出错")
					}
				})

			},
			//删除图片
			deleteImg(idx) {
				this.coverImgFiles = []
			},
			videoAfterRead(file){
				console.log(file)
				if(file.size > this.videoSize){
					uni.showToast({
						title: '最大支持20MB'
					})
					return 
				}
				uni.showLoading({
					title:'上传中'
				})
				uni.uploadFile({
					url: Config.domain + '/u/my/uploadFile',
					filePath: file.url,
					name: "file",
					header: {
						Authorization: uni.getStorageSync(Constants.USER_TOKEN_KEY)
					},
					success: (res) => {
						uni.hideLoading()
						let rData = JSON.parse(res.data);
						if (rData.code === 200) {
							this.videoList.push({
								url: rData.data
							})
							this.editForm.image = rData.data
						}else{
							uni.$u.toast("上传出错")
						}
					},
					fail: () => {
						uni.hideLoading()
						uni.$u.toast("上传出错")
					}
				})
				
			},
			videoDelete(){
				this.videoList = []
			},
			//关闭选择框
			cancelHandler(e) {
				this.pickerShow = false
			},
			//选择分类
			confirmHandler(e) {
				this.pickerShow = false
				const {
					columnIndex,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				this.editForm.filmName = e.value[0].name
				this.editForm.filmId = e.value[0].id
			},
			//提交修改
			editFilmData() {
				this.$refs.editFilm.validate().then(res => {
					if (res) {
						let formData = this.editForm
						formData.thumbnail = this.coverImgFiles[0].url
						formData.image = this.videoList[0].url
						var params = {
							url: `/film/movie/u/saveResource`,
							method: "POST",
							data: formData,
							callBack: (res) => {
								if (res.code === 200) {
									uni.$u.toast(this.id ? "修改成功" : "添加成功")
									setTimeout(function(){
										uni.navigateBack()
									},600)
								}else{
									uni.$u.toast('操作失败')
								}
							}
						};
						http.request(params);
					}
				}).catch(errors => {
					uni.$u.toast("必填项未填")
				})

			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.btn {
		width: 90vw;
		position: absolute;
		left: 5vw;
		bottom: 30rpx;
	}
</style>
